<template>
  <view class="tech-ai-container">
    <!-- Header with advanced neon effect -->
    <view class="tech-header">
      <view class="tech-logo">
        <text class="logo-text">AI<text class="highlight">Tech</text></text>
        <view class="logo-glow"></view>
      </view>
      <view class="tech-header-actions">
        <view class="tech-btn">
          <view class="tech-icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </view>
        </view>
        <view class="tech-btn">
          <view class="tech-icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </view>
        </view>
        <view class="tech-btn">
          <view class="tech-icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M21 21L16.65 16.65" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </view>
        </view>
      </view>
    </view>
    
    <!-- Main content area -->
    <view class="tech-content">
      
      
      <!-- AI Face Swap & AI Outfit Change Cards -->
      <view class="spotlight-cards">
        <view class="spotlight-card spotlight-card-redesigned" @click="navigateToFaceSwap">
          <view class="tech-card-bg"></view>
          <view class="spotlight-content">
            <view class="spotlight-header">
              <view class="spotlight-icon-container">
                <view class="icon-hexagon"></view>
                <view class="spotlight-icon">
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </view>
              </view>
              <view class="tech-badge">热门</view>
            </view>
            <view class="spotlight-text">
              <view class="title-container">
                <text class="spotlight-title">AI</text>
                <text class="title-highlight">换脸</text>
                <view class="title-decoration"></view>
              </view>
              <view class="spotlight-content-row">
                <text class="spotlight-description">智能面部替换技术，一键生成个性化肖像</text>
                <view class="try-now-badge">
                  <text class="try-now-text">立即体验</text>
                </view>
              </view>
            </view>
          </view>
          <view class="card-decoration">
            <view class="tech-circle"></view>
            <view class="tech-circle"></view>
            <view class="tech-line"></view>
          </view>
          <view class="card-vignette"></view>
          <view class="spotlight-overlay">
            <!-- <view class="card-stats">
              <view class="stat-pill"><text class="stat-value">99%</text><text class="stat-label">精准度</text></view>
              <view class="stat-pill"><text class="stat-value">2s</text><text class="stat-label">生成速度</text></view>
            </view> -->
            <view class="spotlight-btn">
              <text class="btn-text">立即体验</text>
              <text class="btn-arrow">→</text>
            </view>
          </view>
        </view>
        
        <view class="spotlight-card spotlight-card-redesigned" @click="navigateToOutfitChange">
          <view class="tech-card-bg tech-card-bg-alt"></view>
          <view class="spotlight-content">
            <view class="spotlight-header">
              <view class="spotlight-icon-container">
                <view class="icon-hexagon"></view>
                <view class="spotlight-icon">
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.05026 14.0002C3.80026 15.0002 3.00026 16.5002 3.00026 19.0002V21.0002H21.0003V19.0002C21.0003 16.5002 20.2003 15.0002 18.9503 14.0002" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 15C9.79 15 7.5 13.84 7.5 10.5V5H16.5V10.5C16.5 13.84 14.21 15 12 15Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7.5 5V4.5C7.5 3.12 8.62 2 10 2H14C15.38 2 16.5 3.12 16.5 4.5V5" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7.5 10.01H16.5" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </view>
              </view>
              <view class="tech-badge">推荐</view>
            </view>
            <view class="spotlight-text">
              <view class="title-container">
                <text class="spotlight-title">AI</text>
                <text class="title-highlight">换装</text>
                <view class="title-decoration"></view>
              </view>
              <view class="spotlight-content-row">
                <text class="spotlight-description">智能时尚搭配，虚拟试穿各种服饰</text>
                <view class="try-now-badge">
                  <text class="try-now-text">立即体验</text>
                </view>
              </view>
            </view>
          </view>
          <view class="card-decoration">
            <view class="tech-circle"></view>
            <view class="tech-circle"></view>
            <view class="tech-line"></view>
          </view>
          <view class="card-vignette"></view>
          <view class="spotlight-overlay">
            <!-- <view class="card-stats">
              <view class="stat-pill"><text class="stat-value">HD</text><text class="stat-label">高清画质</text></view>
              <view class="stat-pill"><text class="stat-value">3D</text><text class="stat-label">立体效果</text></view>
            </view> -->
            <view class="spotlight-btn">
              <text class="btn-text">立即体验</text>
              <text class="btn-arrow">→</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- Feature cards with holographic effect -->
      <view class="tech-features">
        <view class="feature-card">
          <view class="card-icon-container">
            <view class="card-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.93 6.76L18.56 5.62C18.38 5.55 18.19 5.61 18.07 5.74L16.17 7.64C14.44 7.18 12.5 7.18 10.77 7.64L8.87 5.74C8.75 5.61 8.56 5.56 8.38 5.62L5.01 6.76C4.85 6.82 4.74 6.96 4.7 7.13C4.29 9.34 4.69 11.78 5.83 13.94C7.13 16.44 9.09 18.15 11.33 18.87C11.67 18.97 12.28 18.97 12.61 18.87C14.86 18.15 16.82 16.44 18.11 13.94C19.26 11.78 19.66 9.34 19.25 7.13C19.21 6.96 19.09 6.82 18.93 6.76H21.93Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M7.5 12.5C7.69 12.5 8.25 12.34 9 12" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M13.5 14.5C14 14.5 14.5 14.25 14.5 13.75C14.5 13.25 14 13 13.5 13C13 13 12.5 13.25 12.5 13.75C12.5 14.25 13 14.5 13.5 14.5Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M10.5 14.5C11 14.5 11.5 14.25 11.5 13.75C11.5 13.25 11 13 10.5 13C10 13 9.5 13.25 9.5 13.75C9.5 14.25 10 14.5 10.5 14.5Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M16.5 14.5C17 14.5 17.5 14.25 17.5 13.75C17.5 13.25 17 13 16.5 13C16 13 15.5 13.25 15.5 13.75C15.5 14.25 16 14.5 16.5 14.5Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </view>
          </view>
          <text class="card-title">智能对话</text>
          <text class="card-description">基于先进NLP技术的自然语言交互系统</text>
          <view class="card-action-btn">
            <text>探索</text>
            <text class="arrow-icon">→</text>
          </view>
        </view>
        
        <view class="feature-card">
          <view class="card-icon-container">
            <view class="card-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 12.5C2 12.5 5.5 7 12 7C18.5 7 22 12.5 22 12.5C22 12.5 18.5 18 12 18C5.5 18 2 12.5 2 12.5Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="12.5" r="3" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15.2 5.3L16.7 8.7" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20.7 8.3L18.2 10.7" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8.8 5.3L7.3 8.7" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3.3 8.3L5.8 10.7" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </view>
          </view>
          <text class="card-title">AI创作</text>
          <text class="card-description">生成高质量图像、视频和3D模型</text>
          <view class="card-action-btn">
            <text>体验</text>
            <text class="arrow-icon">→</text>
          </view>
        </view>
        
        <view class="feature-card">
          <view class="card-icon-container">
            <view class="card-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 20V10" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 20V4" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M6 20V14" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </view>
          </view>
          <text class="card-title">数据分析</text>
          <text class="card-description">强大的数据预测和分析工具</text>
          <view class="card-action-btn">
            <text>分析</text>
            <text class="arrow-icon">→</text>
          </view>
        </view>
        
        <view class="feature-card">
          <view class="card-icon-container">
            <view class="card-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 9H16.5C17.0304 9 17.5391 9.21071 17.9142 9.58579C18.2893 9.96086 18.5 10.4696 18.5 11C18.5 11.5304 18.2893 12.0391 17.9142 12.4142C17.5391 12.7893 17.0304 13 16.5 13H12V9Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 13H17C17.5304 13 18.0391 13.2107 18.4142 13.5858C18.7893 13.9609 19 14.4696 19 15C19 15.5304 18.7893 16.0391 18.4142 16.4142C18.0391 16.7893 17.5304 17 17 17H12V13Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 17H17.5C18.0304 17 18.5391 17.2107 18.9142 17.5858C19.2893 17.9609 19.5 18.4696 19.5 19C19.5 19.5304 19.2893 20.0391 18.9142 20.4142C18.5391 20.7893 18.0304 21 17.5 21H12V17Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8.5 15H5.5C5.10218 15 4.72064 14.842 4.43934 14.5607C4.15804 14.2794 4 13.8978 4 13.5C4 13.1022 4.15804 12.7206 4.43934 12.4393C4.72064 12.158 5.10218 12 5.5 12H8.5C8.89782 12 9.27936 11.842 9.56066 11.5607C9.84196 11.2794 10 10.8978 10 10.5C10 10.1022 9.84196 9.72064 9.56066 9.43934C9.27936 9.15804 8.89782 9 8.5 9H6" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M6 6V9" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8 21V17" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 3V21" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </view>
          </view>
          <text class="card-title">智能助手</text>
          <text class="card-description">全天候AI助手，提供个性化服务</text>
          <view class="card-action-btn">
            <text>启动</text>
            <text class="arrow-icon">→</text>
          </view>
        </view>
      </view>
      
    
    </view>
    
    <!-- Floating action button -->
    <view class="floating-action-btn">
      <view class="fab-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 5V19M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </view>
    </view>
    
    <!-- Footer navigation -->
    <view class="tech-footer">
      <view class="footer-item active">
        <view class="footer-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M9 22V12H15V22" stroke="#21ab86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </view>
        <text class="footer-label">首页</text>
      </view>
      <view class="footer-item">
        <view class="footer-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#5a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 21L16.65 16.65" stroke="#5a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </view>
        <text class="footer-label">探索</text>
      </view>
      <view class="footer-item">
        <view class="footer-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 2H7C5.89543 2 5 2.89543 5 4V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20V4C19 2.89543 18.1046 2 17 2Z" stroke="#5a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 18H12.01" stroke="#5a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </view>
        <text class="footer-label">应用</text>
      </view>
      <view class="footer-item">
        <view class="footer-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#5a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#5a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </view>
        <text class="footer-label">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // Data properties would go here
    };
  },
  onLoad() {
    // Initialize the page
    console.log('Tech AI page loaded');
  },
  methods: {
    navigateToFaceSwap() {
      uni.navigateTo({
        url: '/pages/faceswap/index'
      });
    },
    navigateToOutfitChange() {
      uni.navigateTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.tech-ai-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #def2ed;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  position: relative;
}

.tech-ai-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(33, 171, 134, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(33, 171, 134, 0.08) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.tech-content, .tech-header, .tech-footer {
  position: relative;
  z-index: 2;
}

/* Header styles */
.tech-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(33, 171, 134, 0.15);
}

.logo-text {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: #333333;
}

.highlight {
  color: #21ab86;
  position: relative;
  font-weight: 700;
}

.tech-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 5px;
}

.tech-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 255, 250, 0.95) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(33, 171, 134, 0.1);
  box-shadow: 0 2px 6px rgba(33, 171, 134, 0.1);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.tech-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(33, 171, 134, 0.1);
}

.tech-icon {
  font-size: 16px;
  color: #21ab86;
  z-index: 2;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-icon svg {
  width: 15px;
  height: 15px;
}

/* Main content styles */
.tech-content {
  flex: 1;
  padding: 20px;
  padding-top: 65px;
  padding-bottom: 80px;
  overflow-y: auto;
}

.hero-section {
  margin-bottom: 30px;
  text-align: center;
}

.hero-title {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333333;
  letter-spacing: -0.5px;
}

.hero-subtitle {
  font-size: 17px;
  color: rgba(51, 51, 51, 0.8);
  margin-bottom: 20px;
  font-weight: 400;
}

.tech-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(33, 171, 134, 0.15);
  box-shadow: 0 2px 10px rgba(33, 171, 134, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  color: #21ab86;
}

.stat-label {
  font-size: 13px;
  color: rgba(51, 51, 51, 0.7);
  margin-top: 4px;
}

.stat-divider {
  width: 1px;
  height: 30px;
  background: rgba(33, 171, 134, 0.2);
}

/* Cards - AI Face Swap & AI Outfit Change */
.spotlight-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
}

.spotlight-card-redesigned {
  flex: 1;
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 5px;
  box-shadow: 0 4px 20px rgba(33, 171, 134, 0.12);
}

.tech-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
  border: 1px solid rgba(33, 171, 134, 0.2);
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(33, 171, 134, 0.1);
}

.tech-card-bg-alt {
  background: linear-gradient(145deg, #ffffff 0%, #f2f9f7 100%);
}

.spotlight-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.spotlight-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.spotlight-card-redesigned .spotlight-title {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  letter-spacing: -0.3px;
}

.title-highlight {
  font-size: 20px;
  font-weight: 700;
  color: #21ab86;
  margin-left: 2px;
  position: relative;
}

.spotlight-content-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: 10px;
  gap: 10px;
}

.spotlight-card-redesigned .spotlight-description {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(51, 51, 51, 0.75);
  max-width: 100%;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}

.try-now-badge {
  background: rgba(33, 171, 134, 0.15);
  border-radius: 12px;
  padding: 2px;
  border: 1px solid rgba(33, 171, 134, 0.25);
  box-shadow: 0 2px 6px rgba(33, 171, 134, 0.1);
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  margin-top: 2px;
}

.try-now-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(33, 171, 134, 0.05) 100%);
  z-index: 0;
}

.try-now-text {
  color: #21ab86;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.tech-badge {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(33, 171, 134, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
}

.spotlight-card-redesigned .spotlight-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateY(100px);
  transition: transform 0.3s ease;
  z-index: 5;
  border-radius: 0 0 16px 16px;
}

.spotlight-card-redesigned:hover .spotlight-overlay {
  transform: translateY(0);
}

.card-stats {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(33, 171, 134, 0.2);
  box-shadow: 0 2px 6px rgba(33, 171, 134, 0.05);
}

.stat-value {
  font-weight: 600;
  font-size: 13px;
  color: #21ab86;
}

.stat-label {
  font-size: 12px;
  color: rgba(51, 51, 51, 0.7);
}

.spotlight-card-redesigned .spotlight-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  color: white;
  padding: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40px;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(33, 171, 134, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.spotlight-card-redesigned .spotlight-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(33, 171, 134, 0.2);
}

.btn-text {
  z-index: 1;
}

.btn-arrow {
  font-size: 18px;
  z-index: 1;
  transition: transform 0.3s ease;
}

.spotlight-card-redesigned .spotlight-btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Feature cards */
.tech-features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}

.feature-card {
  flex: 1 1 calc(50% - 16px);
  min-width: calc(50% - 16px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(33, 171, 134, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  box-shadow: 0 4px 15px rgba(33, 171, 134, 0.1);
}

.card-icon-container {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(33, 171, 134, 0.05) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  border: 1px solid rgba(33, 171, 134, 0.15);
  box-shadow: 0 5px 15px rgba(33, 171, 134, 0.1);
  overflow: hidden;
}

.card-icon-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(33, 171, 134, 0.03) 30%,
    rgba(33, 171, 134, 0.05) 70%,
    transparent 100%
  );
  transform: rotate(45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.feature-card:hover .card-icon-container::before {
  opacity: 0;
}

.card-icon {
  font-size: 24px;
  color: #21ab86;
  filter: drop-shadow(0 2px 3px rgba(33, 171, 134, 0.2));
  z-index: 2;
  transition: all 0.3s ease;
}

.feature-card:hover .card-icon {
  transform: scale(1.1);
}

.card-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333333;
  letter-spacing: -0.2px;
}

.card-description {
  font-size: 14px;
  color: rgba(51, 51, 51, 0.7);
  margin-bottom: 10px;
  line-height: 1.4;
}

.card-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #21ab86;
  font-weight: 500;
}

/* News section */
.tech-news-section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.view-all {
  font-size: 12px;
  color: rgba(51, 51, 51, 0.8);
  display: flex;
  align-items: center;
  gap: 5px;
}

.news-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-item {
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  position: relative;
  border: 1px solid rgba(33, 171, 134, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(33, 171, 134, 0.1);
}

.news-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  background: #21ab86;
  color: white;
  font-weight: 500;
}

.news-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  padding-right: 40px;
  color: #333333;
}

.news-time {
  font-size: 12px;
  color: rgba(51, 51, 51, 0.5);
}

/* Demo section */
.tech-demo-section {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  margin-bottom: 80px;
  border: 1px solid rgba(33, 171, 134, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 15px rgba(33, 171, 134, 0.1);
}

.demo-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333333;
  letter-spacing: -0.3px;
}

.demo-subtitle {
  font-size: 15px;
  color: rgba(51, 51, 51, 0.7);
  margin-bottom: 20px;
}

.demo-input-container {
  display: flex;
  margin-bottom: 15px;
}

.demo-input {
  flex: 1;
  height: 44px;
  border-radius: 10px 0 0 10px;
  border: 1px solid rgba(33, 171, 134, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: #333333;
  padding: 0 16px;
  font-size: 15px;
}

.demo-button {
  height: 44px;
  border-radius: 0 10px 10px 0;
  border: none;
  background: #21ab86;
  color: white;
  padding: 0 18px;
  font-weight: 600;
  font-size: 15px;
}

.demo-example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.example-tag {
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.8);
  color: #333333;
  border: 1px solid rgba(33, 171, 134, 0.2);
}

/* Floating action button */
.floating-action-btn {
  position: fixed;
  bottom: 110rpx;
  right: 40rpx;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 20rpx rgba(33, 171, 134, 0.3);
  z-index: 90;
  transform: translateZ(0);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-action-btn:active {
  transform: translateZ(0) scale(0.95);
  box-shadow: 0 5rpx 10rpx rgba(33, 171, 134, 0.2);
}

.fab-icon {
  font-size: 28px;
  color: white;
  font-weight: 300;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  z-index: 2;
}

/* Footer */
.tech-footer {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(33, 171, 134, 0.15);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 0 10px;
}

.footer-icon {
  font-size: 22px;
  color: rgba(51, 51, 51, 0.6);
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(33, 171, 134, 0.05));
}

.footer-label {
  font-size: 12px;
  margin-top: 2px;
  color: #5a8a7a;
}

.footer-item.active .footer-icon {
  color: #21ab86;
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 4px rgba(33, 171, 134, 0.2));
}

.footer-item.active .footer-label {
  color: #21ab86;
  font-weight: 500;
}

@keyframes shineEffect {
  0% {
    transform: rotate(45deg) translateX(-30%);
  }
  100% {
    transform: rotate(45deg) translateX(30%);
  }
}

.feature-card:active .card-icon-container::before {
  opacity: 1;
  animation: shineEffect 2s infinite;
}

.feature-card:active .card-icon {
  transform: scale(1.1);
}

.tech-btn:active::after {
  opacity: 1;
}

.floating-action-btn:active {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(33, 171, 134, 0.4);
}

.spotlight-card-redesigned .spotlight-content {
  padding: 20px;
  height: 100%;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.spotlight-card-redesigned .spotlight-icon-container {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(33, 171, 134, 0.05) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border: 1px solid rgba(33, 171, 134, 0.15);
  box-shadow: 0 5px 15px rgba(33, 171, 134, 0.1);
  overflow: hidden;
}

.title-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}

.title-decoration {
  position: absolute;
  height: 8px;
  width: 30px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(90deg, rgba(33, 171, 134, 0.3), rgba(33, 171, 134, 0));
  border-radius: 4px;
}
</style> 